<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<meta name="description" content="">
	<meta name="author" content="">
	<title>班级说说--剪裁选取头像</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/jquery.Jcrop.css">
    <script src="/js/jquery-1.9.1.js"></script>
    <script src="/js/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="/js/xiaoguo.js"></script>
	<style>
		body {
			padding-top: 10px;
		}
	</style>
</head>

<body>
	<% include header.ejs %>

	<img src="/avatar/<%=avatar%>" id="target" alt="[Jcrop Example]" />
	<div id="preview-pane">
		<div class="preview-container">
			<img src="/avatar/<%=avatar%>" class="jcrop-preview" alt="Preview" />
		</div>
	</div>
	<input type="button" value="剪裁！！" id="btn">
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
    $("input").click(function () {
        var w = parseInt($(".jcrop-holder>div:first").css("width"));
        var h = parseInt($(".jcrop-holder>div:first").css("height"));
        var x = parseInt($(".jcrop-holder>div:first").css("left"));
        var y = parseInt($(".jcrop-holder>div:first").css("top"));

        $.get("/docut",{
            "w" : w,
            "h" : h,
            "x" : x,
            "y" : y
        },function(result){
            if(result == "1"){
                window.location = "/";
            }else if(result=='-1'){
				alert('错误咯')
			}
        });
    });
</script>
</body>

</html>